<template>
  <div class="home">
    <loading :show="loadingshow" text="正在提交"></loading>
    <alert v-model="alertShow" title="错误" content="所有内容不能为空"></alert>
    <toast v-model="toastShow" text="提交成功" position="top"></toast>
    <div class="header">
      <div class="logo">
        <img src="../../assets/img/home/logo.png" alt="">
      </div>
      <div class="title">
        <img src="../../assets/img/home/zixun-title_03.png" alt="">
      </div>
    </div>

    <div class="form-group">
      <group title="请输入信息">
        <x-input title="姓名" placeholder="请输入姓名" v-model="formData.user_name"></x-input>
        <x-input title="电话" placeholder="请输入电话" v-model="formData.user_mobile"></x-input>
        <x-input title="地址" placeholder="请输入地址" v-model="formData.address"></x-input>
        <x-input title="作物" placeholder="请输入作物名称" v-model="formData.crop_name"></x-input>
        <x-textarea title="状况" placeholder="请说明情况" v-model="formData.description"></x-textarea>
        <div class="btn-group">
          <x-button type="primary" text="发送位置"></x-button>
          <x-button type="primary" text="提交信息" @click.native="handleSubmit"></x-button>
        </div>

      </group>
    </div>


  </div>
</template>

<script>
  import { XInput, Group, XTextarea, XButton, Loading, Toast, AlertModule, Alert } from 'vux'
  import { postInquires } from '@/api/inquires'

  export default {
    components: {
      XInput,
      Group,
      XTextarea,
      XButton,
      Loading,
      Toast,
      AlertModule,
      Alert
    },
    data () {
      return {
        formData: {},
        loadingshow: false,
        alertShow: false,
        toastShow: false
      }
    },
    methods: {
      handleSubmit () {
        if (this.valiFormData(this.formData)) {
          this.loadingshow = true
          postInquires(this.formData).then((res) => {
            this.loadingshow = false
            this.toastShow = true
            this.formData = {}
            console.log('res: ', res)
          })
        } else {
          this.alertShow = true
        }
      },
      valiFormData (data) {
        if (data.user_name &&
          data.user_mobile &&
          data.address &&
          data.crop_name &&
          data.description) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style>

</style>

